<script setup lang='ts'>
import { nextTick, onMounted, ref } from 'vue';


const swiper = ref<HTMLElement>()
let i = ref(1)
// onMounted(() => {
//     //定时器实现轮播图
//     let timer = setInterval(function fn() {
//         let dom: HTMLElement = swiper.value as HTMLElement
//         if (i.value < 3) {
//             dom.style.transition = ''
//             dom.style.transform = 'translateY(-' + 64 * i.value + 'px)'
//             i.value++
//         } else {
//             i.value = 1
//             dom.style.transition = 'all'
//             dom.style.transform = ''
//             let timer2 = setTimeout(() => {
//                 fn()
//                 window.clearTimeout(timer2)
//             });

//         }

//     }, 1000)
// })
</script>
<template>
    <div class="swiper-box" ref="swiper">
        <div class="swiper-item">s12</div>
        <div class="swiper-item"><img class="s12-img" src="../../assets/s12.png" alt=""></div>
        <div class="swiper-item">s12</div>
    </div>
</template>
<style lang='less' scoped>
.swiper-box {
    width: 54px;
    height: 192px;
    position: relative;
    // transition: all .45s ease;
    animation: swiper 10s ease-out infinite;
    animation-delay: 4.5s;

    .swiper-item {
        width: 100%;
        height: 64px;
        line-height: 64px;
        text-align: center;


        .s12-img {
            height: 36px;
            vertical-align: middle;
        }
    }
}

@keyframes swiper {

    from,
    40% {
        transform: translateY(0);
    }

    50%,
    90% {
        transform: translateY(-64px);
    }

    to {
        transform: translateY(-64*2px)
    }
}
</style>